|
ElementUI虽好，可是日历不大好QAQ 是????So，需要我们自己定制一个日历
思路：
首先是这是日历的显示样式，通过对表单、头部、每一个单元格的设置，设置出自己需要的样式；第二步是修改每个日期块的显示内容，elementUI已经为我们预留了插槽显示的方案，我们只需要按照自己的需求定制亦可以了；最后一步是隐藏掉原生的按钮，加上自己的按钮绑定事件就可以了。
效果：
跟原生的一比，还是挺好看的
过程：
1. 修改日历样式（SCSS）
① 头部背景色、头部标题字体颜色按需修改
::v-deep .el-calendar__header {
// 修改头部背景颜色
background-color: #57617C;
padding: 3px 5px;
border: none;
display: flex;
justify-content: center;
.el-calendar__title {
// 修改头部标题的字体颜色
color: white !important;
font-size: 18px;
font-weight: bolder;
}
}
② 主题padding清零
::v-deep .el-calendar__body {
// 修改主题部分
padding: 0;
}
③ 头部星期padding清零、背景色修改、字体颜色修改；每个日期块样式修改、选中样式修改
::v-deep .el-calendar-table {
thead {
th {
// 修改头部星期部分
padding: 0;
background-color: #57617C;
color: white;
}
}
.is-selected {
.el-calendar-day {
p {
// 选中日期颜色
color: white;
}
}
}
.el-calendar-day {
// 每天小块样式设置
padding: 0;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
p {
// 所有日期颜色
color: black;
z-index: 1;
}
}
}
④ 非本月字体颜色修改、周末背景颜色修改
::v-deep .el-calendar-table__row {
.prev, .next {
// 修改非本月
.el-calendar-day {
p {
color: #f0d9d5;
}
}
}
td {
// 修改每一个日期td标签
&:first-child, &:last-child {
background-color: #f5f5f5;
}
}
}
⑤ 按钮样式
button {
padding: 3px 10px;
}
2. 通过插槽修改日历显示
官方文档给的插槽解释是两个，一个日期，一个对象。 而我们通过函数将其打印出来，他们两个是什么一目了然。  可以看到，date就是不同日期Date()实例，data则对应每一个日期块对象。其中包括是否选择，之前一个月/当前月份/下一个月份判断以及日期。 我们给选择的日期，加一个div，设置其border-radius，给其加一个背景圆圈。 
同时，时间只保留日，其余的删掉。
3. 修改按钮
① 隐藏掉原生按钮
::v-deep .el-calendar__header {
.el-calendar__button-group {
// 隐藏原生按钮
display: none;
}
}
② 加上自己的按钮
③ 绑定事件
因为日历的时间是和value双向绑定的，所以我们只需要更改value就可以了。
完整组件代码
{{ data.day.split('-').slice(2).join('-') }}
年
月
日
今天
日
月
年
import moment from 'moment'
import PubSub from 'pubsub-js'
export default {
name: "Calendar",
data() {
return {
value: new Date()
}
},
computed: {
selectDate() {
return moment(this.value).format("YYYY-MM-DD");
}
},
methods: {
skip(flag) {
if (flag === 'preYear') this.value = new Date(this.value.setFullYear(this.value.getFullYear() - 1));
else if (flag === 'preMonth') this.value = new Date(this.value.setMonth(this.value.getMonth() - 1));
else if (flag === 'preDay') this.value = new Date(this.value.setDate(this.value.getDate() - 1));
else if (flag === 'today') this.value = new Date();
else if (flag === 'postDay') this.value = new Date(this.value.setDate(this.value.getDate() + 1));
else if (flag === 'postMonth') this.value = new Date(this.value.setMonth(this.value.getMonth() + 1));
else if (flag === 'postYear') this.value = new Date(this.value.setFullYear(this.value.getFullYear() + 1));
},
clickCalendar(data) {
console.log(data)
PubSub.publish("uploadWarningResultWarningTime", data.day);
}
}
}
#customizedCalendar {
width: 100%;
height: 100%;
#button {
margin-top: 10px;
display: flex;
justify-content: center;
align-items: center;
}
#selectP {
width: 30px;
height: 30px;
background-color: #15ff2c;
position: absolute;
border-radius: 50%;
opacity: 0.6;
}
::v-deep .el-calendar__header {
// 修改头部背景颜色
background-color: #57617C;
padding: 3px 5px;
border: none;
display: flex;
justify-content: center;
.el-calendar__button-group {
// 隐藏原生按钮
display: none;
}
.el-calendar__title {
// 修改头部标题的字体颜色
color: white !important;
font-size: 18px;
font-weight: bolder;
}
}
::v-deep .el-calendar__body {
// 修改主题部分
padding: 0;
}
::v-deep .el-calendar-table {
thead {
th {
// 修改头部星期部分
padding: 0;
background-color: #57617C;
color: white;
}
}
.is-selected {
.el-calendar-day {
p {
// 选中日期颜色
color: black;
}
}
}
.el-calendar-day {
// 每天小块样式设置
padding: 0;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
p {
// 所有日期颜色
color: black;
z-index: 1;
user-select: none;
display: flex;
}
}
}
::v-deep .el-calendar-table__row {
.prev, .next {
// 修改非本月
.el-calendar-day {
p {
color: #f0d9d5;
}
}
}
td {
// 修改每一个日期td标签
&:first-child, &:last-child {
background-color: #f5f5f5;
}
}
}
button {
padding: 3px 10px;
}
}
|